<template>
  <div class="todolist">
    <div class="tt-header">
      <div class="tt-header-box">
        <!-- 输入框 -->
        <input v-model="v1"
               v-on:keydown.enter="addTask"
               type="text"
               placeholder="请输入您的计划">
        <!-- 按钮 -->
        <button v-on:click="addTask">确认</button>
      </div>
    </div>

    <div class="tt-plan">
      <h3 class="tt-plan-title">
        计划列表 [<span>{{total}}</span>]
      </h3>
      <div class="tt-plan-list">
        <h3>未完成 [<span>{{unfinishCount}}</span>]</h3>
        <ul>
          <!-- 模板：未完成状态 -->
          <li v-for="(item,index) in taskArray"
              v-bind:key="item.id"
              v-show="!item.isDone">
            <div class="plan-box">
              <!-- 复选框 -->
              <input type="checkbox"
                     v-model="taskArray[index].isDone">
              <span>{{item.task}}</span>
            </div>
            <div class="plan-btn">
              <!-- 删除 -->
              <button v-on:click="deleteTask(index)">删除</button>
            </div>
          </li>
        </ul>
        <h3>已完成 [<span>{{finishCount}}</span>]</h3>
        <ol>
          <!-- 模板：已完成状态 -->
          <li v-for="(item ,index) in taskArray"
              v-bind:key="item.id"
              v-show="item.isDone">
            <div class="plan-box">
              <input type="checkbox"
                     v-model="taskArray[index].isDone">
              <span>{{item.task}}</span>
            </div>
            <div class="plan-btn">
              <button v-on:click="deleteTask(index)">删除</button>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'todolist',
  data () {
    return {
      v1: "", // 记录输入的值
      // 记录每一次输入的“计划”{ task: "敲代码", isDone: false, id: "xxx1" },
      taskArray: [],
      total: 0
    }
  },
  computed: {
    // 未完成的数量
    unfinishCount () {
      // 计数器变量
      let count = 0;
      // 循环数组
      this.taskArray.forEach(item => {
        // 判断计划的状态 ！
        if (!item.isDone) {
          count += 1;
        }
      })
      // 返回计算的结果
      return count;
    },
    // 已完成的数量
    finishCount () {
      // 计数器变量
      let count = 0;
      // 循环数组
      this.taskArray.forEach(item => {
        // 判断计划的状态 
        if (item.isDone) {
          count += 1;
        }
      })
      // 返回计算的结果
      return count;
    }
  },
  watch: {
    // 属性侦听 不需要return 
    taskArray: {
      deep: true,
      immediate: true, // immediate
      handler: function () {
        this.total = this.taskArray.length;
      }
    }
  },
  methods: {
    deleteTask (index) {
      if (this.taskArray == 0) {
        return;
      }
      this.taskArray.splice(index, 1);
    },
    addTask () {
      // 判断输入框是否有值
      if (this.v1.length == 0) {
        alert("请输入计划")
        return;
      }
      let obj = {};
      obj.task = this.v1;// 当前输入的任务
      obj.isDone = false;// 任务状态
      obj.id = Symbol();//唯一的

      // 把这个任务添加到数组中
      this.taskArray.unshift(obj);

      // 重置输入的值
      this.v1 = "";
    }
  }

}
</script>

<style lang="less" scoped>
@import '../assets/plan.css';
</style>